<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>首页</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  <script src="./vue-3.0.0.js"></script>
</head>

<body>
  <div class="root">
    1.setup() 函数
    <div>
      setup()函数会在created()生命周期之前执行
      <p>特点： 接收props数据 setup()函数第一个参数是props 组件接收的props数据可以在setup()访问到</p>
      <p>context 是setup第二个参数 是一个上下文对象 可以通过context来访问vue实例</p>
    </div>
  </div>
  2.Composition-Api
  <div>
    一组低侵入式的、函数式的 API 能更灵活的去使用
  </div>
  3.reactive()函数解释
  <div>
    reactive()用来创建一个对象 返回一个响应式对象
  </div>
  4.ref()
  <div>
    能根据给的值创建一个响应式的值 返回一个对象 只有 value 一个属性
  </div>
  5.computed()
  <div>
    计算属性 使用之前必须先引入 返回一个ref()实例
  </div>
  6.readonly()
  <div>
    传入一个响应式对象、普通对象或 ref ，返回一个只读的对象代理。
  </div>
  7. watchEffect()
  <div>传入值之后会立刻执行的一个函数</div>
  8.isRef()
  <div>用来判断某个值是否为 ref() 创建出来的响应式的值</div>
  9.toRefs()
  <div>可以把一个reactive()创建出的对象转换成ref普通对象的值</div>
  10.watch()
  <div>
    监听器 可以监听单个值或者多个的值的数据<br>
    如果侦听对象中当个属性，需要使用函数方式<br>
    watch(() => obj.age, (v1, v2) => {<br>
    console.log('sutInfo')<br>
    },<br>
    { immediate: true, deep: true }<br>
    )<br>
    1.immediate：true,表示组件渲染时立即调用<br>
    2.deep：true，表示深度监听对象里面的子属性<br>
  </div>
</body>
<script>
  watch(() => obj.age, (v1, v2) => {
    console.log('sutInfo')
  },
    { immediate: true, deep: true }
  )
</script>

</html>